import React from 'react';
import ReactDOM from 'react-dom';

//import {render} from "@testing-library/react";

/*class Hocks extends React.Component {
    state = {
        count: 0
    }

    myRef = React.createRef()

    add = () => {
        this.setState((state) => ({count: state.count += 1}))
    }

    remove = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    componentDidMount() {
        this.timer = setTimeout(() => {
            this.setState(state => ({count: state.count + 1}))
        }, 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    show = () => {
        alert(this.myRef.current.value)
    }

    render() {
        return (
            <div>
                <input type={"text"} ref={this.myRef}/>
                <h2>和为：{this.state.count}</h2>
                <button onClick={this.add}>+1</button>
                <button onClick={this.remove}>卸载</button>
                <button onClick={this.show}>展示数据</button>
            </div>
        );
    }
}*/

function Hocks() {
    let [count, setCount] = React.useState(0)
    let [name, setName] = React.useState('tom')
    let myRef = React.useRef()
    React.useEffect(() => {
        let interval = setInterval(() => {
            setCount(count => count + 99)
        }, 1000);
        //相当于卸载组件回调
        return () => {
            clearInterval(interval)
        }
    }, [])

    function add() {
        setCount(count => count + 1)
    }

    function changeName() {
        setName('name')
    }

    function remove() {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    function show() {
        alert(myRef.current.value)
    }

    return (
        <div>
            <input type={"text"} ref={myRef}/>
            <h2>和为：{count}</h2>
            <h2>和为：{name}</h2>
            <button onClick={add}>+1</button>
            <button onClick={changeName}>点我改名</button>
            <button onClick={remove}>卸载</button>
            <button onClick={show}>展示数据</button>
        </div>
    )
}

export default Hocks;